<template>
  <div class="wrapper">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path:'/5-3'}">后台管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'/5-3'}">角色管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加角色</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
      <el-form-item label="角色名称" prop="role">
        <el-input v-model="ruleForm.role"></el-input>
      </el-form-item>
      <el-form-item label="选择权限" prop="checkmodule">
        <el-checkbox :indeterminate="ruleForm.isIndeterminate" v-model="ruleForm.checkall"
                     @change="handleCheckAllChange">
          全选
        </el-checkbox>
        <el-checkbox-group v-model="ruleForm.checkmodule" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="item in ruleForm.modules" :label="item.value" :key="item.value" name="type">{{item.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="wentback">返回</el-button>
        <el-button type="warning" @click="submitForm('ruleForm')">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {
    roleadd
  } from "@/api/role/role";
  import {
    modulelist
  } from "@/api/navbar/navbar"
  export default {
    name: "AddNewRole",
    data() {
      return {
        ruleForm: {
          checkmodule: [],
          model:[],
          isIndeterminate: true,
          role: '',
          checkall: false,
          modules: []
        },
        rules: {
          role: [
            {required: true, message: '请输入角色名称', trigger: 'blur'},
            {min: 3, max: 7, message: '长度在 3 到 7 个字符', trigger: 'blur'}
          ],
          checkmodule: [
            {type: 'array', required: true, message: '请至少为用户选择一个权限', trigger: 'change'}
          ],
        }
      }
    },
    mounted(){
      this.handlecheckbox();
    },
    methods: {
      handlecheckbox(){
        let params={};
        params.page=1;
        params.size=10;
        modulelist(params).then(this.getCheckboxSucc)
      },
      getCheckboxSucc(res){
        console.log(res);
        for(let item of res.data.UserList){
          this.ruleForm.modules.push({
            name:item.modelName,
            value:item.id
          })
        }
        console.log(this.ruleForm.modules);
      },
      handleCheckAllChange(val) {
        for(let item of this.ruleForm.modules){
          this.ruleForm.model.push(item.value)
        }
        this.ruleForm.checkmodule = val ? this.ruleForm.model : [];
        this.ruleForm.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        console.log(value);
        let checkedCount = value.length;
        this.ruleForm.checkall = checkedCount === this.ruleForm.modules.length;
        this.ruleForm.isIndeterminate = checkedCount > 0 && checkedCount < this.ruleForm.modules.length;
      },
      submitForm(ruleForm) {
        let competence='';
        for(let item of this.ruleForm.checkmodule){
          competence+=item+","
        }
        console.log(competence);
        let params={};
        params.competence=competence;
        params.userActor=this.ruleForm.role;
        params.createBy=JSON.parse(localStorage.userinfo).id;
        console.log(params);
        this.$refs[ruleForm].validate((valid) => {
          if (valid) {
            this.$confirm('确定创建后台角色吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'success'
            }).then(() => {
              let _this=this;
              roleadd(params).then(function (res) {
                _this.$router.push({name:'RoleManagement'})
              });
              this.$message({
                type: 'success',
                message: '已创建后台角色'
              });
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消创建'
              })
            });
          } else {
            this.$message('内容填写不完整');
            return false;
          }
        });
      },
      wentback() {
        this.$router.push({name: 'RoleManagement'})
      }
    }
  }
</script>

<style scoped>

</style>
